import React, { Component } from 'react';
import { List } from 'immutable';
import classNames from 'classnames';
import Image from 'components/Image'
import { Row, Col, Button, Icon } from 'antd';
import noop from 'util/noop'
export default class GoodsItem extends Component {
    static defaultProps = {
        itemOrders: [],
        open:false,
        more:false,//是否有更多的商品
        toggleMore:noop
    };

    render() {
        const { itemOrders, open, more } = this.props;

        return (
            <div className="order-goods-list">
                {itemOrders.map(this.renderItems)}
                {
                    more ? (
                        <a href="javascript:void(0);">
                            <Icon className="list-ct t-grayer" 
                                    type={open ? 'up' : 'down'} 
                                    onClick={this.showMore} />
                        </a>
                    ) : null
                }
            </div>
        )
    }

    renderItems(itemOrder, index){
        let specState = classNames('t-grayer', {
            hide: !itemOrder.productSpecification
        });
        let rtDom = (
            <div className="order-goods-item" key={index}>
                <Row>
                    <Col span="18">
                        <div className="order-goods-info">
                            <Image width={70} height={70} src={itemOrder.picUrl} alt={itemOrder.itemName} />
                            <p className="good-name">{itemOrder.itemName}</p>
                            <p className={specState}>{`规格：${itemOrder.productSpecification}`}</p>
                        </div>
                    </Col>
                    <Col span="6">
                        <div className="goods-price t-right">
                            <p className="real-price">&yen;{(itemOrder.pervalue || 0).toFixed(2)}</p>
                            <p className="price t-grayer">
                                <del>&yen;{(itemOrder.initItemPrice || 0).toFixed(2)}</del>
                            </p>
                            <p>&times;{itemOrder.itemNumber}</p>
                        </div>
                    </Col>
                </Row>
            </div>
        )
        if (index == 0) {
            return rtDom;
        } else {
            return [<div className="split-line" />, rtDom];
        }
    }

     /**
     * 展示更多商品信息
     */
    showMore = () => {
       this.props.toggleMore()
    }
}